<script lang="ts" setup>

    import { ref,reactive} from 'vue'
    import MyList from './MyList.vue';
    let books=ref([{title:"vue311",content:"入门"},
                {title:"vue312",content:"进阶"},
                {title:"vue313",content:"实战"}
    ])

</script>

<template>
    <MyList :items="books">
        <template v-slot:header="data">
            <h1 class="xx">{{ data.nums }}本</h1>
        </template>

        <template v-slot="{it,index}">
            <div class="item">{{ index+1 }}--{{ it.title }}--{{ it.content }}</div>
        </template>

        <template #footer>
            <div class="xxx">感谢</div>
        </template>
    </MyList>
</template>

<style scoped>

.xx{
    color: wheat;
    text-align: center;
}
.xxx{
    color: blue;
}
.item{
    color: pink;
}
</style>
